<template>
    <el-tooltip placement="top">
        <template #content>
            <div class="tooltip_user_name">
                <div class="item">
                    <div class="label">账号名称:</div>
                    <div class="value">{{ data.name }}</div>
                </div>
                <div class="item">
                    <div class="label">账号:</div>
                    <div class="value">{{ data.username }}</div>
                </div>
            </div>
        </template>
        <div class="user_item">
            <img src="@/assets/home/platform.png" style="width: 14px;height: 14px;margin-right: 8px;" alt="">
            <div>{{ data.name == '' ? '--' : data.name }}</div>
        </div>
    </el-tooltip>

</template>

<script setup>
const props = defineProps({
    data: Object
})

</script>

<style lang="scss" scoped>
.user_item {
    padding: 4px 6px;
    height: 20px;
    border: 1px solid #ececec;
    margin-right: 8px;
    color: #5b5c60;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.tooltip_user_name {
    display: flex;
    flex-direction: column;

    .item {
        display: flex;

        .label {
            // width: 60px;
            margin-right: 6px;
            display: flex;
        }
    }
}
</style>